<template>
  <div class="cmap">
    <div class="blank"></div>
    <div class="main">
      <!-- <div class="text">
        <span>
          <ul>
            <li v-for="(item, index) of numArr" :key="index">{{ item }}</li>
          </ul>
        </span>
      </div> -->

      <!--  页面中部--顶部数据栏     -->
      <div class="data_mid_1">
        <!--  页面中部--顶部数据栏--单个显示块        -->
        <div class="data1" v-for="(item, index) in mid_top" :key="index">
          <div class="data1_img" :style="{background: 'url(' + item.img + ')'}"></div>
          <div class="data1_right">
            <div class="data1_text1">{{ item.text }}</div>
            <div class="data1_text2">
              {{ item.data }}<span class="data1_text5">  {{ item.unit }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- <div id="ex-map" class="ex-map"></div> -->
      <div id="mapContainer" class="map-container"></div>
      <!-- <div id="cmapChart2" class="cmapChart2"></div> -->
    </div>
  </div>
</template>

<script>
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
import { _wgs84tobj2000, _bj2000towgs84 } from '@/utils/coor.js';

import "@geoman-io/leaflet-geoman-free";
import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";
import '@supermap/iclient-leaflet/dist/iclient-leaflet.js';
import '@supermap/iclient-leaflet/dist/iclient-leaflet.css';
//引入图标
import location from '@/assets/img/location.png';
import mapFunc from '@/api/map.js';
import initMap from "@/api/j-map.js";
import "proj4leaflet";
//引入轨迹坐标
import trackPoint from "./map/trackPoint";
//引入图标
import markerIcon from '@/assets/img/marker_fire_policeman.png';
import videoMarkerIcon from '@/assets/img/marker_fire_video.png';
import teamMarkerIcon from '@/assets/img/marker_team.png';

export default {
  name:"ex-map",
  props: {
      center: {
          type: Object,
          default: () => {
              //116.391418,39.907107  return { lat: '39.906190088313224', lng: '116.4452222183175' };
              //天安门 { lat: '39.907107', lng: '116.391418' };
              return { lat: '23.088981', lng: '113.323540' };
          },
      },
      zoom: {
          type: Number,
          default: 13,
      },
      editable: {
          type: Boolean,
          default: true,
      },
      drawMarker:{
          type: Boolean,
          default: true,
      },
      drawPolygon:{
          type: Boolean,
          default: true,
      },
      showFeatures: {
          type: Array,
          default: () =>[] ,
      },
      editFeatures:{
          type: Array,
          default: () =>[] ,
      },
      debug: {
          type: Boolean,
          default: false,
      },
      autoFocus: {
          type: Boolean,
          default: true,
      }
  },
  data() {
      return {
          map: null,
          zoomSize: 14,
          showLayer:null,
          editLayer:null,
          editCenter:null,
          _editFeatures:[],
          currentMarker:null,
          mid_top: [
            {
              unit: '人',
              text: '在岗人员',
              data: 3,
              img: require('@/assets/img/datamid/data_mid_1_2.png')
            },
            {
              unit: '在线',
              text: '通讯设备',
              data: 3,
              img: require('@/assets/img/datamid/data_mid_1_3.png')
            },
            {
              unit: '度',
              text: '今日用水量',
              data: 11,
              img: require('@/assets/img/datamid/data_mid_1_2.png')
            },
            {
              unit: '度',
              text: '今日用电量',
              data: 23,
              img: require('@/assets/img/datamid/data_mid_1_1.png')
            }
          ],
      };
  },
  watch: {
      center: {
          //首次绑定数据时不触发
          immediate: false,
          handler(newVal, oldVal) {
              // console.log(newVal, "地图中心变更！");
              this.map.stop();
              this.map.flyTo(newVal);
              this.map.setZoom(13);
          },
      },
      editable: {
          immediate: false,
          handler(newVal, oldVal) {
              this.switchEditable(newVal);
          },
      },
      editFeatures: {
          immediate: false,
          handler(newVal, oldVal) {
              if (this.editLayer) {
                  this.editLayer.remove();
                  this.editLayer = null;
              }
              this.loadGeoFeatures(this.editFeatures, true);
              if(this.autoFocus){
                  this.flyToDefCenter();
              }
          },
      },
      showFeatures: {
          immediate: false,
          handler(newVal, oldVal) {
              if (this.showLayer) {
                  this.showLayer.remove();
                  this.showLayer = null;
              }
              this.loadGeoFeatures(this.showFeatures, false);
              if(this.autoFocus){
                  this.flyToDefCenter();
              }
          },
      },
  },
  mounted() {
      //初始化地图
      // this.initMap();
      this.initTianDiTuMap();
      //加载要显示geojson数据
      if (this.showFeatures != null && this.showFeatures.length != 0) {
          this.loadGeoFeatures(this.showFeatures, false);
      }
      if (this.editFeatures != null && this.editFeatures.length != 0) {
          this.loadGeoFeatures(this.editFeatures, true);
      }
      if(this.autoFocus){
          this.flyToDefCenter();
      }
  },
  methods: {
      switchEditable(allowEdit){
          if(allowEdit){
              this.addEditControls();
          }else {
              this.removeEditControls();
          }
      },
      addEditControls() {
          this.map.pm.addControls({
              position: "topleft",//topright
              drawMarker: this.drawMarker, //绘制标记点
              drawCircleMarker: false, //绘制圆形标记
              drawPolyline: false, //绘制线条
              drawRectangle: false, //绘制矩形
              drawPolygon: this.drawPolygon, // 绘制多边形
              drawCircle: false, //绘制圆圈
              drawText: false, //绘制文本
              editMode: true, //编辑多边形
              dragMode: true, //拖动多边形
              cutPolygon: false, // 添加一个按钮以删除多边形里面的部分内容
              removalMode: true, // 清除多边形
              rotateMode: false,//旋转图层
              oneBlock: true, //所有按钮将显示为一个块Customize Controls。
              drawControls: true, //显示块中的所有绘制按钮/按钮draw。
              editControls: true, //显示块中的所有编辑按钮/按钮edit。
              customControls: true, //显示custom块中的所有按钮。
          });
      },
      removeEditControls(){
          try{
              //关闭绘制
              this.map.pm.disableDraw();
              this.map.pm.disableGlobalEditMode();
              this.map.pm.disableGlobalDragMode();
              this.map.pm.disableGlobalRemovalMode();
              // this.map.pm.disableGlobalCutMode();
              // this.map.pm.disableGlobalRotateMode();
          }catch (e) {
          }
          //移除控制
          this.map.pm.removeControls();
      },
      loadGeoJSON(data, opts) {
          const _this = this;
          let allowEdit = false;
          let options = {};
          if(typeof (opts)=="boolean"){
              allowEdit = opts
          }else  if(typeof (opts)=="object") {
              options = opts || {};
          }
          if(allowEdit){
              this.editLayer = L.geoJSON(data, options);
              this.editLayer.addTo(this.map);
             // 遍历GeoJSON图层中的要素
              this.editLayer.eachLayer(function(layer) {
                  // 检查要素是否为点要素（可以根据需要添加其他条件）
                  if (layer.pm._shape=='Marker') {
                      // console.log("this.layer1111111111layer")
                      // console.log("this.layer1111111111layer",layer)
                      // 如果是第一个点要素，则设置currentMarker
                      if (!_this.currentMarker) {
                          _this.currentMarker = layer;
                          // 如果需要，可以在这里添加对currentMarker的额外操作
                      }
                      // console.log("_this.currentMarker",_this.currentMarker)
                      // 注意：这里只设置了第一个点要素为currentMarker，如果有多个点要素需要设置，则需要修改逻辑
                  }
              });

              // this.showLayer.pm.enable({
              //     allowSelfIntersection: false,
              // });
              //
              // this.editLayer.on("pm:change", (e) => {
              //     //图层改变时
              //     console.log("change");
              // });
              // this.editLayer.on("pm:edit", (e) => {
              //     //图层编辑释放后
              //     console.log(e.layer, "edit");
              //     console.log(_this.editLayer, "editLayer");
              // });
              // this.editLayer.on("pm:enable", (e) => {
              //     //图层编辑启用时
              //     console.log("enable");
              // });
              // this.editLayer.on("pm:dragenable", (e) => {
              //     //图层拖动启用时
              //     console.log("dragenable");
              // });

              this.editLayer.on("pm:remove", (e) => {
                  //图层删除事件
                  // console.log(e.layer,"[EditLayer Event] pm:remove");
                  //一个图层中可能存在多个图形，因此在根据_leaflet_id 移除图层
                  let layerId =  e.layer._leaflet_id+'';
                  delete _this.editLayer._layers[layerId];
              });
              return this.editLayer;

              //
              // this.editLayer.on("pm:drag", (e) => {
              //     //图层编辑拖动
              //     console.log(e, "pm:drag");
              // });

              // 监听图层删除事件
              // this.map.on("layerremove", (e) => {
              //     console.log( e.layer, "layerremove");
              // });

          }else {
              if (!!!options.onEachFeature) {
                  options.onEachFeature = function (feature, layer) {
                      // 绑定弹出提示窗口
                      if (feature.properties && feature.properties.title) {
                          layer.bindPopup(feature.properties.title);
                      }
                  };
              }
              this.showLayer = L.geoJSON(data, options);
              // console.log(options.addToMap, "geoJSON");
              if (options.addToMap === false) {
                  // console.log("该图层不加载！");
              } else {
                  this.showLayer.addTo(this.map);
              }
              this.showLayer.on("pm:change", (e) => {
                  // console.log("change");
                  e.layer.pm.disable();
              });
              this.showLayer.on("pm:edit", (e) => {
                  // console.log("edit");
              });

              // 不允许编辑
              this.showLayer.on("pm:enable", (e) => {
                  // console.log("edit");
                  e.layer.pm.disable();
              });
              // 不允许移动
              this.showLayer.on("pm:dragenable", (e) => {
                  // console.log("dragenable");
                  e.layer.pm.disableLayerDrag();
              });
              // 不允许删除
              this.showLayer.on("pm:remove", (e) => {
                  // console.log("pm:remove");
                  //目前没发现提供取消删除的方法
                  // 所以这里采用的方式是移除后又把图层重新加入到地图中，实现[无法删除]的效果
                  e.layer.addTo(_this.map);

              });
              return this.showLayer;
          }
      },
      loadGeoFeatures(features, allowEdit){
          if (features != null && features.length != 0){
              let geoData = {type: "FeatureCollection"};
              geoData.features = features;
              this.loadGeoJSON(geoData, allowEdit);
          }
      },
      getDefMarkerIcon(){
          const defIcon = L.icon({
              iconUrl: location,
              iconSize: [27, 36],
              iconAnchor: [18, 36],
          });
          return defIcon;
      },
      //初始化地图
      initMap(){
          L.Marker.prototype.options.icon = this.getDefMarkerIcon();
          this.map = mapFunc.initMap('ex-map', {center: this.center, zoom: this.zoom});
          
          //设置绘制图层样式
          this.map.pm.setPathOptions({
              color: "orange",
              fillColor: "green",
              fillOpacity: 0.4,
          });

          this.map.pm.setLang('zh');
          this.map.pm.setGlobalOptions({ snappable: false });

          //this.switchEditable(this.editable);
          this.bindEventListener();

      },

      initTianDiTuMap(){
        // 使用轨迹点的第一个点作为地图中心
        console.log("trackPoint:", trackPoint); // 添加调试信息
        const firstPoint = trackPoint[0];
        console.log("firstPoint:", firstPoint); // 添加调试信息
        const mapResult = initMap(`mapContainer`, { lat: firstPoint[1], lng: firstPoint[0] }, 14, undefined);
        this.map = mapResult.map;
        console.log("map:", this.map); // 添加调试信息
        
        // 在地图创建完成后绘制轨迹线
        this.drawTrackLine();
        
        // 添加视频标记点
        this.addVideoMarker();
        
        // 添加团队标记点
        this.addTeamMarkers();
      },
      
      // 绘制轨迹线
      drawTrackLine() {
        if (!this.map || !trackPoint || trackPoint.length === 0) {
          console.error('地图未初始化或轨迹点数据为空');
          return;
        }
        
        // 调整坐标点顺序：从 [经度, 纬度] 转换为 [纬度, 经度]
        const adjustedTrackPoints = trackPoint.map(point => [point[1], point[0]]);
        
        // 创建轨迹线
        const trackLine = L.polyline(adjustedTrackPoints, {
          color: '#ff0000',
          weight: 5,
          opacity: 1,
          dashArray: '10, 10'
        }).addTo(this.map);
        
        // 将地图视图调整到轨迹线的范围，并添加一些内边距
        const bounds = trackLine.getBounds();
        this.map.fitBounds(bounds, {
          padding: [50, 50]
        });
        
        // 在轨迹线的起点和终点添加标记
        const startPoint = adjustedTrackPoints[0];
        const endPoint = adjustedTrackPoints[adjustedTrackPoints.length - 1];
        
        // 创建起点标记（绿色圆点）
        const startMarker = L.marker(startPoint, {
          icon: L.divIcon({
            className: 'start-marker',
            html: '<div style="background-color: green; width: 15px; height: 15px; border-radius: 50%; border: 2px solid white;"></div>',
            iconSize: [15, 15]
          })
        }).addTo(this.map);
        
        // 创建终点标记
        const endMarker = L.marker(endPoint, {
          icon: L.icon({
            iconUrl: markerIcon,
            iconSize: [27, 36],
            iconAnchor: [16, 32],
            popupAnchor: [0, -32]
          })
        }).addTo(this.map);
        
        // 添加起点和终点的弹出信息
        startMarker.bindPopup('起点');
        endMarker.bindPopup('终点');
      },
      
      // 添加视频标记点
      addVideoMarker() {
        // 创建视频标记图标
        const videoIcon = L.icon({
          iconUrl: videoMarkerIcon,
          iconSize: [27, 36],
          iconAnchor: [16, 32],
          popupAnchor: [0, -32]
        });
        
        // 创建自定义弹出窗口内容
        const videoPopupContent = `
          <div class="video-popup">
            <video width="320" height="240" controls autoplay muted>
              <source src="/static/images/commonServer/monitor.mp4" type="video/mp4">
              您的浏览器不支持视频播放
            </video>
          </div>
        `;
        
        // 创建自定义弹出窗口
        const videoPopup = L.popup({
          maxWidth: 340,
          className: 'video-popup-container',
          offset: [200, 20], // 向右偏移 20 像素
          autoPan: true, // 自动平移地图以确保弹出窗口完全可见
          autoPanPadding: [50, 50] // 自动平移时的内边距
        }).setContent(videoPopupContent);
        
        // 添加视频标记点
        const videoMarker = L.marker([23.10199, 113.32134], {
          icon: videoIcon
        }).addTo(this.map);
        
        // 绑定弹出窗口
        videoMarker.bindPopup(videoPopup);
        
        // 添加点击事件，使弹出窗口显示在右侧
        videoMarker.on('click', function(e) {
          const point = this.getLatLng();
          const pixelPoint = this.map.latLngToContainerPoint(point);
          
          // 计算右侧位置
          const rightOffset = 20; // 向右偏移的像素数
          const containerPoint = L.point(pixelPoint.x + rightOffset, pixelPoint.y);
          const rightLatLng = this.map.containerPointToLatLng(containerPoint);
          
          // 打开弹出窗口在右侧位置
          this.openPopup();
          this.getPopup().setLatLng(rightLatLng);
        });
        
        // 自动打开弹出窗口
        setTimeout(() => {
          const point = videoMarker.getLatLng();
          const pixelPoint = this.map.latLngToContainerPoint(point);
          
          // 计算右侧位置
          const rightOffset = 20;
          const containerPoint = L.point(pixelPoint.x + rightOffset, pixelPoint.y);
          const rightLatLng = this.map.containerPointToLatLng(containerPoint);
          
          // 打开弹出窗口在右侧位置
          videoMarker.openPopup();
          videoMarker.getPopup().setLatLng(rightLatLng);
        }, 1000); // 延迟1秒打开，确保地图完全加载
      },
      
      // 添加团队标记点
      addTeamMarkers() {
        // 创建团队标记图标
        const teamIcon = L.icon({
          iconUrl: teamMarkerIcon,
          iconSize: [27, 36],
          iconAnchor: [16, 32],
          popupAnchor: [0, -32]
        });
        
        // 添加第一个团队标记点
        const teamMarker1 = L.marker([23.10226, 113.31982], {
          icon: teamIcon
        }).addTo(this.map);
        teamMarker1.bindPopup('团队位置1');
        
        // 添加第二个团队标记点
        const teamMarker2 = L.marker([23.10109, 113.3212], {
          icon: teamIcon
        }).addTo(this.map);
        teamMarker2.bindPopup('团队位置2');
      },
      
      bindEventListener(){
          //see in https://geoman.io/docs/leaflet/modes/draw-mode
          let _this = this;

          //地图缩放事件
          this.map.on('zoom', function(e) {
              _this.$emit('map-zoom', this.map);
          });

          //地图缩放结束事件
          this.map.on('zoomend', function(e) {
              _this.$emit('map-zoomend', _this.map);
          });

          //绘制工具状态切换事件
          this.map.on("pm:globaldrawmodetoggled", (e) => {
              // console.log(e, "切换绘图模式！");
              // this.$emit('globaldrawmodetoggled', e);
              if(!e.enabled){
                  _this.saveEditResult();
              }
          });

          //绘制开始事件
          this.map.on("pm:drawstart", (e) => {
              // console.log(e, "绘制按钮激活！");
              if (e.shape === 'Marker') {
                  e.workingLayer.setIcon(_this.getDefMarkerIcon());
              }
          });

          //绘制结束事件
          this.map.on("pm:drawend", (e) => {
              // console.log( e, "绘制停止！");
          });

          //绘制工具状态切换事件
          this.map.on("pm:create", (e) => {
              // console.log(e, "绘制完成！");
              // this.$emit('draw-create', e);

              let type = e.layerType;
              let layer = e.layer;
              let shape = e.shape;
              if (e.shape === 'Marker') {
                  if (this.currentMarker) {
                      this.map.removeLayer(this.currentMarker);
                  }
                  e.layer.setIcon(_this.getDefMarkerIcon());
                  this.currentMarker = e.layer;        
              }
              //当前图层
              // console.log(layer.toGeoJSON());
              _this.saveEditResult();

          });

          this.map.on("pm:globaleditmodetoggled", (e) => {
              // console.log(e,  "编辑工具状态切换事件！");
              // this.$emit('globaleditmodetoggled', e);
              if(!e.enabled){
                  _this.saveEditResult();
              }
          });

          this.map.on("pm:globalremovalmodetoggled", (e) => {
              // console.log(e, "删除工具状态切换事件！");
              // this.$emit('globalremovalmodetoggled', e);
              if(!e.enabled){
                  _this.saveEditResult();
              }
          });

          this.map.on("pm:globaldragmodetoggled", (e) => {
              // console.log(e, "移动工具状态切换事件！");
              // this.$emit('globaldragmodetoggled', e);
              if(!e.enabled){
                  _this.saveEditResult();
              }
          });

          //监听图层删除事件
          // this.map.on("pm:remove", (e) => {
          //     console.log( e, "删除事件！");
          //     _this.saveEditResult();
          // });
          //
          // this.map.on("pm:change", (e) => {
          //     console.log( e, "修改事件！");
          //     _this.saveEditResult();
          // });
      },
      getLayerCenter(layer) {
          // console.log(layer,"getLayerCenter");
          try {
              if(layer.pm._shape=='Marker'){
                  return layer._latlng||layer.pm._layers[0]._latlng;
              }else {
                  if(layer.pm._layer || (Array.isArray(layer.pm._layers) && layer.pm._layers.length>0)){
                      let bounds = layer.getBounds();
                      return bounds.getCenter();
                  }
              }
          } catch (e) {
              console.error(e);
          }
          return null;
      },
      getAllLayerFeatures() {
          //所有图层
          let _this = this;

          //所有图层
          // const allLayers = this.map.pm.getGeomanLayers(true);
          // allLayers.forEach(l => {
          //     console.log(l._drawnWithLeaflet,"绘制");
          // });

          // console.log(allLayers, "【allLayers】");

          //所有新绘制的图层
          let layerCenter = null;
          const drawLayers = this.map.pm.getGeomanDrawLayers();
          // console.log("共包含" + drawLayers.length + "个新绘制图层！");
          _this._editFeatures = [];
          drawLayers.forEach(layer => {
              _this._editFeatures.push(layer.toGeoJSON());
              if(layerCenter==null){
                  layerCenter = this.getLayerCenter(layer);
              }
          });
          if(this.editLayer){
              let editGeoJson = this.editLayer.toGeoJSON()
              if (editGeoJson && editGeoJson.features && editGeoJson.features.length > 0) {
                  editGeoJson.features.forEach(feature => {
                      _this._editFeatures.push(feature);
                  });
                  if(layerCenter==null){
                      layerCenter = this.getLayerCenter(this.editLayer);
                  }
              }
          }
          this.$emit('center-found', layerCenter);
      },
      saveEditResult(){
          this.getAllLayerFeatures();
          if(this.debug){
              this.showDebugInfo(this._editFeatures);
          }
          //触发 edit-saved 事件
          this.$emit('edit-saved', this._editFeatures);
      },
      showDebugInfo(msg){
          let debugBox = document.getElementById("debug-result-box");
          if(typeof (msg)=="string") {
              debugBox.innerText = msg;
          }else {
              debugBox.innerText = JSON.stringify(msg);
          }
      },
      flyToDefCenter(centerPoint){
          let defCenter = null;
          if(this.editLayer!=null){
              // console.log(this.editLayer,"defCenter");
              defCenter = this.getLayerCenter(this.editLayer);
          }else if(this.showLayer!=null){
              defCenter = this.getLayerCenter(this.showLayer);
          }else if(centerPoint){
              if(centerPoint.lat && centerPoint.lng){
                  defCenter = centerPoint
              }
          }
          console.log(defCenter,"defCenter");
          if(defCenter){
              this.map.flyTo(defCenter);
          }
      },
      getMapInstance(){
          return this.map;
      },
  },
};
</script>

<style lang="scss" scoped>
  .cmap {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    .blank {
      width: 100%;
      height: 1rem;
    }
    .main {
      flex: 1;
      //background-image: url("../../../../static/images/commonServer/gridCenter.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: relative;
      transform-style: preserve-3d;
      perspective: 62rem;
      overflow: hidden;
      height: calc(100% - 4rem);
      .text {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 6rem;
        text-align: center;
        z-index: 1;
        ul {
          display: inline-block;
          margin: 1rem auto 0;
          li {
            float: left;
            margin: 0 0.3rem;
            font-family: fontled;
            color: #a3c9f5;
            line-height: 3.5rem;
            font-size: 3rem;
            font-weight: 600;
            width: 3rem;
            height: 4rem;
            background-image: url("../../../../static/images/commonServer/numBg.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }
        }
        h3 {
          color: #cfecff;
          font-size: 1.4rem;
        }
      }
      .cmapChart {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }
  /deep/   .custom-button {
      color: #0a3522;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 6px 12px;
      cursor: pointer;
  }
  .ex-map-container,
  .ex-map {
      width: 100%;
      height: 100%;
      max-height: 100%;
      max-width: 100%;
      padding: 0;
      margin: 0;
      background: #032f75;
      position: relative;
  }
  .debug-result-box{
      position: absolute;
      right: 10px;
      bottom: 10px;
      z-index: 9999;
      width: 380px;
      height: 180px;
      font-size: 12px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      background-color: rgba(0, 0, 0, 0.7);
      line-height: 1.6;
      border-radius: 5px;
      padding: 10px;
      word-break: break-all;
      white-space: normal;
      color: #ededed;
      overflow: auto;
  }
  .debug-result-box::before{
      content: "Debug";
      /*display: block;*/
      color: #ffffff;
      background-color: #2aa030;
      padding: 2px 4px;
      margin-right: 4px;
      border-radius: 2px;
      pointer-events: none;
  }

  /deep/ .leaflet-bottom {
      position: absolute;
      z-index: -1000;
      pointer-events: none;
      display:none;
      display: none !important;
  }
  /deep/  .button-container {
      margin-top: 0;
  }
  /deep/  .leaflet-default-icon-path {
      background-image:url('');
  }
  /deep/   .leaflet-popup-content{
      font-size: 14px;
  }

  .data_mid_1 {
    width: 95%;
    height: 100px;
    margin-left: 6rem;
  }

  .data1 {
    float: right;
    height: 90%;
    width: 25%;
  }

  .data1_right {
    float: left;
    color: #fff;
    width: 64%;
    height: 84%;
    padding-top: 5%;
    color: #FBD533;
    margin-left: 2%;
  }

  .data1_img {
    float: left;
    height: 90%;
    width: 33%;
    overflow: hidden !important;
    background-size: cover !important;
  }

  .data1_text1 {
    font-size: 1.2rem;
    font-weight: 600;
    text-align: left;
    margin-left: 6%;
    margin-top: 5%;
    color: white;
  }

  .data1_text2 {
    display: inline-block;
    float: left;
    width: 95%;
    height: 60%;
    font-family: LCD2;
    font-size: 1.8rem;
    text-align: left;
    margin-left: 5%;
    margin-top: 5%;
  }

  .data1_text5 {
    font-size: 1.0rem;
  }

  /deep/ .leaflet-tile-pane {
      opacity: 0.9;
  }

  /deep/ .leaflet-tile {
      opacity: 1;
  }

  .map-container {
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(18, 56, 100, 1), rgba(18, 56, 100, 1)) center/80% 80%, lightblue;
  }

  /deep/ .video-popup-container {
    .leaflet-popup-content-wrapper {
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 8px;
    }
    
    .leaflet-popup-content {
      margin: 10px;
    }
    
    .video-popup {
      video {
        border-radius: 4px;
        background: #000;
      }
    }
  }
</style>